<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/购物车.css">
</head>
<body>
    <div class="box">
        <div class="left">
            
        </div>
        <div class="right">
            <h2>购物车(<span>count</span>)</h2>
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" id="">全选
                        </th>
                        <th>图片</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>删除/收藏</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
<script>
    // 保存产品数据的数组
    let list=[{productsrc:'img/pic1.png',productName:'高级办公椅',price:10000},{productsrc:'img/pic1.png',productName:'高级办公椅',price:10000},{productsrc:'img/pic1.png',productName:'高级办公椅',price:10000},{productsrc:'img/pic1.png',productName:'高级办公椅',price:10000},{productsrc:'img/pic1.png',productName:'高级办公椅',price:10000},{productsrc:'img/pic1.png',productName:'高级办公椅',price:10000},{productsrc:'img/pic1.png',productName:'高级办公椅',price:10000}]
    // 渲染数据到产品展示页面
    renderProduct()
    // 购物车数据
    let shop={list:[]}

    // 渲染数据到产品展示页面
    function renderProduct(){
        document.querySelector('.box .left').innerHTML=list.map((item)=>{
        return `
            <div class="item">
                <div class="top">
                    <img src=${item['productsrc']} alt="">
                </div>
                    <div class="bottom">
                        <p>名称：${item['productName']}</p>
                        <p>价格：${item['price']}</p>
                        <button>加入购物车</button>
                    </div>
                </div>
            </div>
             `
        }).join(' ')
    }
    // 渲染购物车列表
    function renderShop() {
        document.querySelector('.box .right table tbody').innerHTML= shop.list.map((item)=>{
                
                return `
                    <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>
                            <img src="${item['productsrc']}" alt="">
                            <p>${item['productName']}</p>
                        </td>
                        <td>${item['price']}</td>
                        <td>1</td>
                        <td>删除/收藏</td>
                    </tr>
                `
            }).join(' ')
    }

/*     // 给‘加入购物车’按钮添加点击事件(事件委托)
    document.querySelector('.box .left').onclick=(e)=>{
        // 判断点击的标签是不是按钮标签
        if(e.target.tagName=='BUTTON'){
            // 获取所有的按钮标签,...合并成数组
            let btns=[...document.querySelectorAll('.box .left .item .bottom button')]
            // 确定点击的是哪一个按钮
            let index=btns.findIndex((item)=>{
                return item==e.target
            })
            // 把对应产品列表中的数据添加到购物车数组中
            shop.list.push(list[index])
            // 渲染购物车列表
            renderShop()
        }
    } */

    // 给‘加入购物车’按钮添加点击事件(事件委托)
    document.querySelector('.box .left').onclick=(e)=>{
        // 判断点击的标签是不是按钮标签
        if(e.target.tagName=='BUTTON'){
            // 获取所有的按钮标签,...合并成数组
            let btns=[...document.querySelectorAll('.box .left .item .bottom button')]
            // 确定点击的是哪一个按钮
            let index=btns.findIndex((item)=>{
                return item==e.target
            })
            // 把对应产品列表中的数据添加到购物车数组中
            shop.list.push(list[index])
            // 渲染购物车列表
            renderShop()
        }
    }
</script>